<template>
  <ContentWrap>
    <!--    顶部查询项-->
    <el-form :model="form" inline label-width="100px">
      <el-form-item :label="t('productMerge.productname')">
        <el-input
          v-model="form.productname"
          clearable
          :placeholder="'请输入' + t('productMerge.productname')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('productMerge.sku_product_name')">
        <el-input
          v-model="form.sku_product_name"
          clearable
          :placeholder="'请输入' + t('productMerge.sku_product_name')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('productMerge.algorithm')">
        <el-select
          v-model="form.algorithm"
          filterable
          :placeholder="'请选择' + t('productMerge.algorithm')"
          clearable
          style="width: 250px"
        >
          <el-option
            v-for="item in algorithmList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('productMerge.brand')">
        <el-select
          v-model="form.brand"
          filterable
          :placeholder="'请选择' + t('productMerge.brand')"
          clearable
          style="width: 250px"
        >
          <el-option
            v-for="item in brandList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('productMerge.currency')">
        <el-select
          v-model="form.currency"
          filterable
          :placeholder="'请选择' + t('productMerge.currency')"
          clearable
          style="width: 250px"
        >
          <el-option
            v-for="item in currencyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="initialize">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!--    操作项-->
    <div class="flex flex-items-center mb-10px">
      <el-button type="primary" @click="handleAdd('add')">
        {{ t('action.add') }}
      </el-button>
    </div>
    <!-- 表格主体 -->
    <el-table
      :data="dataList"
      highlight-current-row
      stripe
      border
      :height="tableHeight"
      :max-height="tableHeight"
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('productMerge.id')" prop="id" min-width="70" />
      <el-table-column
        :label="t('productMerge.productname')"
        prop="productname"
        :width="calculateColumnWidth(dataList, 'productname', 1, 6)"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.producturlname')"
        prop="producturlname"
        :width="calculateColumnWidth(dataList, 'productname', 1, 6)"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.primary_pid')"
        prop="primary_pid_name"
        :width="calculateColumnWidth(dataList, 'productname', 1, 6)"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column
        :label="t('productMerge.vice_pid')"
        prop="vice_pid"
        :width="calculateColumnWidth(dataList, 'vice_pid')"
        :show-overflow-tooltip="true"
      /> -->
      <!-- <el-table-column
        :label="t('productMerge.storename')"
        prop="storename_val"
        :width="calculateColumnWidth(dataList, 'storename_val')"
        :show-overflow-tooltip="true"
      /> -->

      <!-- <el-table-column
        :label="t('productMerge.sales_pids')"
        prop="sales_pids"
        :width="calculateColumnWidth(dataList, 'sales_pids')"
        :show-overflow-tooltip="true"
      /> -->
      <!-- <el-table-column
        :label="t('productMerge.recommend_pids')"
        prop="recommend_pids"
        :width="calculateColumnWidth(dataList, 'recommend_pids')"
        :show-overflow-tooltip="true"
      /> -->

      <!-- <el-table-column
        :label="t('productMerge.product_photo')"
        prop="product_photo"
        :width="calculateColumnWidth(dataList, 'product_photo')"
        :show-overflow-tooltip="true"
      /> -->
      <!-- <el-table-column
        :label="t('productMerge.closeshots_photo')"
        prop="closeshots_photo"
        min-width="180"
        :show-overflow-tooltip="true"
      >
        <template #default="{ row }">
          {{ row.tax_refund == 0 ? '否' : '是' }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        :label="t('productMerge.pmv_id')"
        prop="pmv_id"
        min-width="120"
        :show-overflow-tooltip="true"
      /> -->
      <!-- <el-table-column
        :label="t('productMerge.smv_id')"
        prop="smv_id"
        min-width="120"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column
        :label="t('productMerge.estimate_price')"
        prop="estimate_price"
        :width="calculateColumnWidth(dataList, 'estimate_price')"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.describe')"
        prop="describe"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.full_describe')"
        prop="full_describe"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.qanda_describe')"
        prop="qanda_describe"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.seotitle')"
        prop="seotitle"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.seodesc')"
        prop="seodesc"
        min-width="200"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.views_number')"
        prop="views_number"
        :width="calculateColumnWidth(dataList, 'views_number')"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.status')"
        prop="status"
        :width="calculateColumnWidth(dataList, 'status')"
        :show-overflow-tooltip="true"
      >
        <template #default="{ row }">
          {{ row.status == 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column
        :label="t('productMerge.creator')"
        prop="creator"
        min-width="120"
        :show-overflow-tooltip="true"
      >
        <template #default="{ row }">
          {{ useEnumeratePicker(operatorList, row.creator) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="t('productMerge.create_time')"
        prop="create_time"
        :width="calculateColumnWidth(dataList, 'create_time')"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('productMerge.updater')"
        prop="updater"
        min-width="120"
        :show-overflow-tooltip="true"
      >
        <template #default="{ row }">
          {{ useEnumeratePicker(operatorList, row.updater) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="t('productMerge.update_time')"
        prop="update_time"
        :width="calculateColumnWidth(dataList, 'update_time')"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="{ row }">
          <el-button @click="handleJump('edit', row)" size="small">
            {{ t('order.edit') }}
          </el-button>

          <el-button type="success" @click="handleJump('detail', row)" size="small">
            详情
          </el-button>

          <el-button type="primary" @click="openProductUrl(row)" size="small">
            商品详情页
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <Pagination
      :total="paginationTotal"
      v-model:page="form.pageIndex"
      v-model:limit="form.pageSize"
      @pagination="initialize"
    />
  </ContentWrap>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { useEnumeratePicker, calculateColumnWidth } from '@/utils'
import { getListApi } from '@/api/productMerge'
import { getGoodsEnumApi } from '@/api/product'
import { getCurrencyListApi } from '@/api/currency'
import { getSelectListApi as getOperatorSelectListApi } from '@/api/operator'

const { t } = useI18n()
const { push } = useRouter()

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const paginationTotal = ref<number>(0)

const form = ref<Record<string, any>>({
  productname: '',
  sku_product_name: '',
  algorithm: '',
  brand: '',
  currency: '',
  status: '',
  pageIndex: 1,
  pageSize: 30
})

const algorithmList = ref<Array<Record<string, any>>>([])
const brandList = ref<Array<Record<string, any>>>([])
const currencyList = ref<Array<Record<string, any>>>([])
const operatorList = ref<Array<Record<string, any>>>([])
// 计算表格高度，让页面撑满屏幕
const tableHeight = computed(() => {
  // 视口高度
  const viewportHeight = window.innerHeight
  // 减去各种固定元素的高度
  // 搜索区域约60px，按钮区域约50px，分页区域约60px，页面边距等约80px
  // 您可以根据实际情况调整这些值
  const fixedHeight = 85 + 40 + 40 + 142 + 42 + 50 + 4
  return viewportHeight - fixedHeight
})
//点击跳转到新增
const handleAdd = (type: string) => {
  push(`/product/product-merge-management/${type}`)
}

//跳转
const handleJump = (type: string, row: Record<string, any>) => {
  const path = ref<string>('') // 默认值为空字符串
  path.value = `/product/product-merge-management/${type}`
  push({ path: path.value, query: { id: row.id } })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getGoodsEnumApi({ field: 'all' })
  algorithmList.value = resp.data.algorithm
  brandList.value = resp.data.brand
  currencyList.value = resp.data.currency
  const currencyResp = await getCurrencyListApi({})
  currencyList.value = currencyResp.data.list
  const applicantResp = await getOperatorSelectListApi({})
  operatorList.value = applicantResp.data.list
}

//初始化请求
const initialize = async () => {
  tableLoading.value = true
  const params = JSON.parse(JSON.stringify(form.value))
  delete params.date
  if (params.order_no && !params.order_type) {
    ElMessage.error('请选择' + t('productMerge.order_type'))
    tableLoading.value = false
    return
  }
  const resp = await getListApi(params)
  dataList.value = resp.data.list

  paginationTotal.value = resp.data.total
  tableLoading.value = false
}

//重置查询项
const reset = () => {
  form.value = {
    productname: '',
    sku_product_name: '',
    algorithm: '',
    brand: '',
    currency: '',
    status: '',
    pageIndex: 1,
    pageSize: 30
  }
  paginationTotal.value = 0
  initialize()
}

const openProductUrl = (row: Record<string, any>) => {
  if (row.product_url) {
    window.open(row.product_url, '_blank')
  }
}

onMounted(() => {
  getDropDownBoxInfo()
  initialize()
})
</script>

<style lang="less" scoped></style>
